<!-- eslint-disable no-unused-vars -->
<!-- eslint-disable vue/no-unused-vars -->
<template>
  <div class="layout-card">
    <div class="user-management">
      <!-- 搜索区域 -->
      <div class="search-area q-mb-md">
        <q-input
          v-model="searchParams.keyword"
          placeholder="请输入用户名搜索"
          dense
          outlined
          class="q-mr-sm"
        >
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
        <q-btn label="搜索" color="primary" @click="fetchData" class="q-mr-sm" />
        <q-btn label="重置" color="secondary" @click="resetSearch" />
      </div>

      <!-- 表格组件 -->
      <fy-table
        :table-data="dataList"
        :columns="columns"
        :title="'用户管理'"
        @row-click="handleRowClick"
        @edit="handleEdit"
        @delete="handleDelete"
        @add="handleAdd"
      >
        <!-- 自定义移动端布局 -->
        <template #mobile-layout="{ data }">
          <div class="custom-mobile-layout">
            <div v-for="row in data" :key="row.id" class="custom-card q-pa-md q-mb-md">
              <!-- 用户基本信息 -->
              <div class="user-header q-mb-md">
                <div class="user-info">
                  <div class="text-h6">{{ row.username }}</div>
                  <div class="text-caption">{{ row.email }}</div>
                  <div class="text-subtitle2">金额: {{ formatToThousands(row.amount) }}</div>
                </div>
                <q-badge
                  :color="row.status === 1 ? 'positive' : 'negative'"
                  :label="row.status === 1 ? '启用' : '禁用'"
                />
              </div>

              <!-- 操作按钮 -->
              <div class="row justify-end q-gutter-sm">
                <q-btn flat dense color="primary" icon="edit" @click.stop="handleEdit(row)">
                  <q-tooltip>编辑</q-tooltip>
                </q-btn>
                <q-btn flat dense color="negative" icon="delete" @click.stop="handleDelete(row)">
                  <q-tooltip>删除</q-tooltip>
                </q-btn>
              </div>
            </div>
          </div>
        </template>

        <!-- 桌面端状态列自定义 -->
        <template #body-cell-status="{ row }">
          <q-badge :color="row.status === 1 ? 'positive' : 'negative'">
            {{ row.status === 1 ? '启用' : '禁用' }}
          </q-badge>
        </template>

        <!-- 修改金额列的自定义显示 -->
        <template #body-cell-amount="{ row, col }">
          <div>
            <div :class="{ 'text-right': col?.align === 'right' }" style="width: 100%">
              {{ formatToThousands(row.amount) }}
            </div>
          </div>
        </template>

        <!-- 在移动端布局中也确保金额占满宽度 -->
        <template #mobile-cell-amount="{ row, col, value }">
          <div class="grid-cell">
            <div class="grid-label">{{ col.label }}</div>
            <div
              class="grid-value"
              :class="{ 'text-right': col?.align === 'right' }"
              style="width: 100%"
            >
              {{ formatToThousands(value) }}
            </div>
          </div>
        </template>

        <!-- 自定义编辑表单 -->
        <template #edit-form="{ editRow, close }">
          <q-form @submit="onSubmit" class="q-gutter-md">
            <q-input
              v-model="formData.username"
              label="用户名"
              :rules="[(val) => !!val || '用户名不能为空']"
            />
            <q-input
              v-model="formData.email"
              label="邮箱"
              :rules="[(val) => !!val || '邮箱不能为空']"
            />
            <q-input
              v-model="formData.amount"
              label="金额"
              type="number"
              :rules="[(val) => !!val || '金额不能为空']"
            />
            <q-select
              v-model="formData.status"
              :options="[
                { label: '启用', value: 1 },
                { label: '禁用', value: 0 },
              ]"
              label="状态"
            />
          </q-form>
        </template>
      </fy-table>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useCrud } from '@/hooks/demo/useDemo'
import FyTable from '@/components/common/FyTable/index.vue'
import { formatToThousands } from '@/utils/formate'

// 定义列配置
const columns = [
  { name: 'username', label: '用户名', field: (row) => row.username },
  { name: 'email', label: '邮箱', field: (row) => row.email },
  { name: 'amount', label: '金额', field: (row) => row.amount, align: 'right' },
  { name: 'status', label: '状态', field: (row) => row.status },
  { name: 'actions', label: '操作' },
]

// 使用 CRUD hook
const {
  dataList,

  searchParams,

  fetchData,
  saveData,
  deleteData,
  resetSearch,
} = useCrud(
  {
    // 这里模拟 API 服务
    getList: () => Promise.resolve({ data: { list: [], total: 0 } }),
    add: () => Promise.resolve({}),
    update: () => Promise.resolve({}),
    delete: () => Promise.resolve({}),
  },
  {
    keyword: '',
  },
)

// 表单数据
const formData = reactive({
  username: '',
  email: '',
  status: 1,
  amount: 0,
})

// 处理行点击
const handleRowClick = (row) => {
  console.log('点击行:', row)
}

// 处理编辑
const handleEdit = (row) => {
  formData.username = row.username
  formData.email = row.email
  formData.status = row.status
}

// 处理删除
const handleDelete = async (row) => {
  await deleteData([row.id])
}

// 处理添加
const handleAdd = () => {
  formData.username = ''
  formData.email = ''
  formData.status = 1
}

// 提交表单
const onSubmit = async () => {
  await saveData(formData, !!formData.id)
}
</script>

<style lang="scss" scoped>
.user-management {
  padding: 20px;

  .search-area {
    display: flex;
    align-items: center;
  }
}

// 添加移动端自定义样式
.custom-mobile-layout {
  .custom-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
    }
  }

  .user-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .user-info {
      .text-h6 {
        font-size: 1.1rem;
        margin: 0;
      }

      .text-caption {
        color: #666;
        font-size: 0.9rem;
      }
    }
  }
}
</style>
